<template>
  <div class="container">
    <!-- 一级标题 -->
    <div class="fanghu">
      <div class="fanghu_title">技术：数据加密技术</div>
      <!-- <div class="fanghu_content">
        在识别战术领域，主要聚焦在数据资产发现和处理，本报告重点对数据资源发现，数据资产识别，数据资产处理（分析），数据分类分级，数据资产打标作出描述。
      </div> -->
    </div>
    <!-- 二级标题 -->
    <div class="fanghu2">
      <el-table :data="tableData" border style="width: 95%; margin-left: 30px">
        <el-table-column prop="title" label="标题" width="100">
        </el-table-column>
        <el-table-column prop="basis" label="基本概念" width="620">
        </el-table-column>
        <el-table-column prop="main" label="主要实现"> </el-table-column>
      </el-table>
    </div>
    <!-- 注解 -->
    <div class="fanghu_explain">
      注释#3:狭义数据源(DataSource)一般指：SUN制定的用于获取数据库连接的规范接口。本处数据源特指组织的数据资源。
    </div>
    <!-- 扩展技术 -->
    <div class="technical-expansion">
      <h2 style="padding: 10px; margin: 20px">扩展技术</h2>
      <div style="margin-top: 20px">
        <span
            type="primary"
            style="margin-left: 45px; color: #429ccd; cursor: pointer"
            @click="drawer1 = true"
        >
          存储加密
        </span>
        <el-drawer v-model="drawer1" title="存储加密" :with-header="false">
          <h5 style="display: block; margin-top: 10px;">基本概念</h5>
          <span style="display: block; text-indent: 2em;">在存储介质主程序启动前加载加密程序，实现在数据写入存储介质前将数据
              进行加密，实现数据的存储加密，在存储介质加载数据到内存前进行数据解密，
              实现数据的解密使用。</span>
          <h5 style="display: block; margin-top: 10px;">主要实现</h5>
          <span style="display: block; text-indent: 2em;">利用密码技术将数据转换成密文存储后，可防止存储环节中的泄密。</span>
          <span style="display: block; text-indent: 2em;margin: 10px;"><b># DLP 终端加密</b></span>
          <span style="display: block; text-indent: 2em;">在受管控的终端上安装代理程序，由代理程序与后台管理平台交互，并结合
              企业的数据管理要求和分级分类策略，对下载到终端的敏感数据进行加密，
              从而将加密应用到企业数据的日常流转和存储中。信息被读取到内存中时会
              进行解密，而未授权复制到管控范围外则是密文形式。</span>
          <span style="display: block; text-indent: 2em;margin: 10px;"><b># CASB 代理网关</b></span>
          <span style="display: block; text-indent: 2em;">将网关部署在目标应用的客户端和服务端之间，无需改造目标应用，只需通
            过适配目标应用，对客户端请求进行解析，并分析出其包含的敏感数据，结
            合用户身份，并根据设置的安全策略对请求进行脱敏等访问控制，可针对结
            构化数据和非结构化数据同时进行安全管控。</span>
          <span style="display: block; text-indent: 2em;margin: 10px;"><b># 应用内数据加密（集成密码 SDK）
              应用内加密（集成密码 SDK）是指应用系统通过开发改造的方式，与封装了
              加密业务逻辑的密码 SDK 进行集成，并调用其加解密接口，使目标应用系统
              具备数据加密防护能力。</b></span>
          <span style="display: block; text-indent: 2em;margin: 10px;"><b># 应用内加密（AOE 面向切面加密）</b></span>
          <span style="display: block; text-indent: 2em;">数据安全插件部署在应用服务中间件，结合旁路部署的数据安全管理平台、
            密钥管理系统，通过拦截入库 SQL，将数据加密后存入数据库。</span>
          <span style="display: block; text-indent: 2em;margin: 10px;"><b># 数据库加密网关</b></span>
          <span style="display: block; text-indent: 2em;">数据库加密网关是部署在应用服务器和数据库服务器之间的代理网关设备，
            通过解析数据库协议，对传入数据库的数据进行加密，从而获得保护数据安
            全的效果。</span>
          <span style="display: block; text-indent: 2em;margin: 10px;"><b># 数据库外挂加密</b></span>
          <span style="display: block; text-indent: 2em;">数据库外挂加密通过针对数据库定制开发外挂进程，使进入数据库的明文先
            进入到外挂程序中进行加密，形成密文后再插入数据库表中。这种技术使用
            “触发器”+“多层视图”+“扩展索引”+“外部调用”的方式实现数据加
            密，可保证应用完全透明。通过扩展的接口和机制，数据库系统用户可以通
            过外部接口调用的方式实现对数据的加解密处理。视图可实现对表内数据的
            过滤、投影、聚集、关联和函数运算，在视图内实现对敏感列解密函数的调
            用，实现数据解密。</span>
          <span style="display: block; text-indent: 2em;margin: 10px;"><b># TDE 透明数据加密</b></span>
          <span style="display: block; text-indent: 2em;">在数据库内部透明实现数据存储加密、访问解密的技术，Oracle、SQL Server、
              MySQL 等数据库默认内置此功能。数据在落盘时加密，在数据库内存中是明
              文，当攻击者“拔盘”窃取数据，由于数据库文件无法获得密钥而只能获取
              密文，从而起到保护数据库中数据的效果。</span>
          <span style="display: block; text-indent: 2em;margin: 10px;"><b># UDF 用户自定义函数加密</b></span>
          <span style="display: block; text-indent: 2em;">在数据库支持的形式上，通过定义函数名称及执行过程，实现自定义的处理
              逻辑。UDF 用户自定义函数加密，是通过 UDF 接口实现数据在数据库内的加
              解密。</span>
          <span style="display: block; text-indent: 2em;margin: 10px;"><b># TFE 透明文件加密</b></span>
          <span style="display: block; text-indent: 2em;">在操作系统的文件管理子系统上部署加密插件来实现数据加密，基于用户态
            与内核态交付，可实现“逐文件逐密钥”加密。</span>
          <span style="display: block; text-indent: 2em;margin: 10px;"><b># FDE 全磁盘加密</b></span>
          <span style="display: block; text-indent: 2em;">通过动态加解密技术，对磁盘或分区进行动作加解密的技术。FDE 的动态加
            解密算法位于操作系统底层，其所有磁盘操作均通过 FDE 进行：当系统向磁
            盘上写入数据时，FDE 首先加密要写入的数据，然后再写入磁盘；反之，当
            系统读取磁盘数据时候，FDE 会自动将读取到的数据进行揭秘，然后再提交
            给操作系统。</span>
          <span style="display: block; text-indent: 2em;margin: 10px;"><b># 可互操作存储加密</b></span>
          <span style="display: block; text-indent: 2em;">把加密算法和密钥管理集成于自加密驱动器（SED），简单用户使用移动存储、移动设备时，复杂的密码技术设置与操作。</span>
        </el-drawer>
      </div>
      <div style="margin-top: 20px">
        <span
            type="primary"
            style="margin-left: 45px; color: #429ccd; cursor: pointer"
            @click="drawer2 = true"
        >
          传输加密
        </span>
        <el-drawer
            class="drawer"
            v-model="drawer2"
            title="传输加密"
            :with-header="false">
          <h5 style="display: block; margin-top: 10px;">基本概念</h5>
          <span style="display: block; text-indent: 2em;">传输加密技术是对传输中的数据流加密，保证传输通道、传输节点和传输数
              据的安全，防止通信线路上的窃听、泄漏、篡改和破坏。</span>
          <h5 style="display: block; margin-top: 10px;">主要实现</h5>
          <span style="display: block; text-indent: 2em;">通常传输加密技术可分为线路加密和端到端加密。其中，线路加密指对保密
              信息通过各线路采用不同的加密密钥提供安全保护；端到端加密指信息由发送端自动加密，并且由 TCP/IP 进行数据包封装，然后作为不可识别的数据经互联网
              传输，在信息到达目的地，将被自动重组、解密，而成为可读的数据。
              此外，根据传输加密的数据对象状态不同，又可分为在线通信消息传输加密
              和离线通信消息传输加密。</span>
          <span style="display: block; text-indent: 2em;margin: 10px;"><b># 离线通信消息传输加密</b></span>
          <span style="display: block; text-indent: 2em;">利用密码学算法和密码协议，构建安全协议或通信框架，在数据在网络传输
            前把数据源加密为密文，经过网络传输后，再对密文进行解密。常见的离线
            通信消息传输加密包含：</span>
          <span style="display: block; text-indent: 2em;">1) PGP 邮件加密，PGP（Pretty Good Privacy）是一种加密系统，主要用于
              发送加密电子邮件和加密敏感文件。当下 PGP 已成为电子邮件安全事实
              标准。PGP 加密系统是采用公开密钥加密与传统密钥加密相结合的一种
              加密技术。它使用一对数学上相关的钥匙，其中一个（公钥）用来加密
              信息，另一个（私钥）用来解密信息。</span>
          <span style="display: block; text-indent: 2em;">2) S/MINE 邮件加密，S/MIME 是指 (安全多用途互联网邮件扩展协议)，是采
              用 PKI 技术的用数字证书给邮件主体签名和加密的国际标准协议，其优
              势在于不仅仅是邮件加密，而且还能为邮件带上邮件发送者的通过第三
              方 CA 验证的真实身份信息，以便收件人能确信发件人的真实身份。</span>
          <span style="display: block; text-indent: 2em;">3) Signal/OTR 聊天加密，Signal，是指一对一的加密协议，该协议采用
              “Ratchet 棘轮”系统，该系统在每条消息后更改密钥，主要通过为每个
              用户生成除永久密钥之外的一组临时密钥来实现此目的。在聊天加密场
              景中，每次发送消息，密钥都会更新。使用该协议，意味着即使用户手机某一时刻被盗，但之前发送的任何消息都是安全的。OTR 指一款安全
              的加密协议，它主要提供将即时聊天和通讯内容进行强加密的服务。OTR
              作为一种聊天协议，它不会留下任何记录，是一种为即时消息加密的加
              密协议。</span>
          <span style="display: block; text-indent: 2em;">4) 安全即时通信，与 Signal/OTR 聊天加密类似，安全即时通信考虑即时通
              信系统安全特性，在即时通信协议的基础上，采用基于 SSL/TLS 的双向
              认证、传输加密技术、基于 PKI 体系的数据加密技术、文件密级标识技
              术，实现安全即时通信平台。</span>
          <span style="display: block; text-indent: 2em;margin: 10px;"><b># 在线通信消息传输加密</b></span>
          <span style="display: block; text-indent: 2em;">利用计算机实现，在发送端，通过运行在计算机中的软件对消息进行加密，
            然后通过装置发功，在加手段收到加密的消息后，传送给计算机，再通过相
            应的软件进行解密。</span>
          <span style="display: block; text-indent: 2em;margin: 10px;"><b># 可感知窃听的专线通信传输加密技术</b></span>
          <span style="display: block; text-indent: 2em;">量子密钥分发技术是量子通信的实现方式之一，利用量子力学将一个真随机
            数密码本安全地分配给通信双方，以供后续加解密使用。在量子密钥分发过
            程中，密钥的生成采用单光子的状态作为信息载体来实现，因为光量子具有
            不可分割且量子态无法复制的特性，即使窃听者使用先进的窃听方式，光量
            子在量子信道传输过程中也无法被破译和窃听，从而确保了量子密钥分发的
            安全性。</span>
          <span style="display: block; text-indent: 2em;margin: 10px;"><b># 代理重加密受控分发消息传输加密技术</b></span>
          <span style="display: block; text-indent: 2em;">代理重加密，是指委托可信第三方或是半诚实代理商将自己公钥加密的密文
            转化为可用另一方私钥解开的密文从而实现密码共享。在云计算与云存储
            中，一种场景需求是用户 A 期望通过云存储平台向用户 B 共享秘密数据，而
            这些数据显然不能被云平台获知。代理重加密可以实现，用户 A 利用自己的
            公钥对数据进行加密后上传，云端对密文进行计算处理后使得这一密文数据
            可以令任一指定用户 B 的私钥进行解密。</span>

        </el-drawer>
      </div>
      <div style="margin-top: 20px">
        <span
            type="primary"
            style="margin-left: 45px; color: #429ccd; cursor: pointer"
            @click="drawer3 = true"
        >
          使用加密
        </span>
        <el-drawer v-model="drawer3" title="使用加密" :with-header="false">
          <h5 style="display: block; margin-top: 10px;">基本概念</h5>
          <span style="display: block; text-indent: 2em;">通过在数据使用过程中采取加密技术手段，防止数据使用过程中数据本身及
            数据计算过程机密性、完整性、可用性被破坏。</span>
          <h5 style="display: block; margin-top: 10px;">主要实现</h5>
          <span style="display: block; text-indent: 2em;margin: 10px;"><b># FHE 全同态加密</b></span>
          <span style="display: block; text-indent: 2em;">由全同态加密方案产生的密文，可以对密文进行任意计算，解密结果与对名
            为进行相应计算的结果相同，实现数据处理权和使用权的分离，防止数据泄
            漏的同时，充分利用外部算力。</span>
          <span style="display: block; text-indent: 2em;margin: 10px;"><b># MPC 多方安全计算</b></span>
          <span style="display: block; text-indent: 2em;">MPC 安全多方计算，允许多个数据所有者在互不信任的情况下进行协同计算，
            输出计算结果，并保证任何一方均无法得到除应得的计算结果之外的其他任
            何信息。MPC 技术可以获取数据使用价值，却不泄露原始数据内容，该技术
            有输入隐私性、计算正确性及去中心化等特性。</span>
          <span style="display: block; text-indent: 2em;margin: 10px;"><b># ZKP 零知识证明</b></span>
          <span style="display: block; text-indent: 2em;">零知识证明（ZKP），是一种基于概率的验证方式。验证者基于一定的随机
              性向证明者提出问题，如果证明者都能给出正确回答，则说明证明者大概率
              拥有他所声称的“知识”。零知识证明并不是数学意义上的证明，因为它存
              在小概率的误差，欺骗的证明者有可能通过虚假的陈述骗过验证者。换句话
              说，零知识证明是概率证明而不是确定性证明，但是也存在技术能将误差降
              低到可以忽略的值。</span>
          <span style="display: block; text-indent: 2em;margin: 10px;"><b># 可验证计算</b></span>
          <span style="display: block; text-indent: 2em;">可验证计算是指不泄露用户隐私并验证外包服务的计算结果，用户将需要计
              算的函数和输入数据加密后发给服务提供者，由服务提供者返回计算结果及
              对结果的证明。用户可验证计算结果的正确性，且验证的计算量远远小于直
              接计算函数。</span>
          <span style="display: block; text-indent: 2em;margin: 10px;"><b># 可信执行环境</b></span>
          <span style="display: block; text-indent: 2em;">可信执行环境（Trusted Execution Environment，TEE）指在计算平台上由
            软硬件方法构建的一个安全区域，可保证在安全区域内加载的代码和数据在
            机密性和完整性方面得到保护，确保一个任务按照预期执行，保证初始状态
            的机密性、完整性，以及运行时状态的机密性、完整性。
            目前成熟的技术主要有：Intel SGX、ARM TrustZone、AMD SEV 和 Intel TXT。</span>
        </el-drawer>
      </div>
    </div>
    <!-- 评论区 -->
    <div class="comments-section">
      <h3>评论区</h3>
      <div v-for="item in comments" :key="item.id" class="comment-item">
        <div>
          <strong>{{ item.username }}:</strong> <span>{{ item.content }}</span>
        </div>
        <span
            style="color: red; cursor: pointer"
            v-if="item.username === commentForm.username"
            @click="del(item.id)"
        >删除</span
        >
      </div>
      <div>
        <el-input
            class="comment-input"
            type="textarea"
            v-model="commentForm.content"
            placeholder="请输入评论内容"
        ></el-input>
      </div>
      <el-button class="comment-button" type="primary" @click="comment"
      >评论</el-button
      >

      <el-message
          v-if="errorMessage"
          :type="'error'"
          :message="errorMessage"
      ></el-message>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request.js";
import { ref } from "vue";
const drawer = ref(false);

export default {
  data() {
    return {
      tableData: [
        {
          title: "数据加密技术",
          content: "",
          basis:"数据加密指通过加密算法和加密密钥将明文转变为密文，而解密则是通过解\n" +
              "密算法和解密密钥将密文恢复为明文。",
          main: "利用加密算法、加密协议以及加密产品，对存储态数据、传输态数据、使用\n" +
              "态数据实现密文到明文相互转化。",
        },

      ],
      comments: [],
      pageId: 11,
      commentForm: {
        content: "",
        username: "", // 用户名会在 mounted 生命周期钩子中生成
        userId: "", // 用户 ID 会在 mounted 生命周期钩子中生成
      },
      errorMessage: "",
      drawer1: false,
      drawer2: false,
      drawer3: false,
    };
  },
  methods: {
    generateUserId() {
      // 生成唯一用户ID，例如使用随机数或UUID
      return "user_" + Math.random().toString(36).substr(2, 9);
    },
    generateUsername() {
      // 生成自动用户名，例如基于时间戳或随机字符串
      return "User_" + Math.random().toString(36).substr(2, 5);
    },
    del(commentId) {
      // 获取要删除的评论
      const comment = this.comments.find((c) => c.id === commentId);

      if (comment) {
        // 只允许删除自己评论
        if (comment.username === this.commentForm.username) {
          request
              .delete(`/comments/${commentId}`)
              .then(() => {
                this.$message.success("评论删除成功");
                this.load(); // 重新加载评论列表
              })
              .catch((error) => {
                console.error("删除评论失败:", error);
                this.$message.error("删除评论失败");
              });
        } else {
          this.$message.error("您没有权限删除此评论");
        }
      } else {
        this.$message.error("评论未找到");
      }
    },
    load() {
      request
          .get("/comments/" + this.pageId)
          .then((res) => {
            this.comments = res.data;
          })
          .catch((error) => {
            console.error("加载评论失败:", error);
          });
    },
    comment() {
      this.errorMessage = "";
      if (!this.commentForm.content.trim()) {
        this.errorMessage = "评论不能为空";
        return;
      }
      // 使用自动生成的用户名
      request
          .post("/comments/" + this.pageId, {
            content: this.commentForm.content,
            username: this.commentForm.username,
            userId: this.commentForm.userId,
          })
          .then(() => {
            this.$message.success("评论成功");
            this.commentForm.content = "";
            this.load();
          })
          .catch((error) => {
            console.error("提交评论失败:", error);
            this.$message.error("提交评论失败");
          });
    },
  },
  mounted() {
    this.commentForm.username = this.generateUsername(); // 在 mounted 生命周期钩子中生成用户名
    this.commentForm.userId = this.generateUserId(); // 在 mounted 生命周期钩子中生成用户 ID
    this.load();
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .fanghu {
    width: 100%;
    padding: 30px;
    .fanghu_title {
      font-size: 36px;
      margin: 0 0 10px 0;
    }
  }
  .fanghu_explain{
    margin: 20px 0 0 30px;
  }
  .comments-section {
    padding: 20px;
    height: 400px;
    margin-left: 20px;
    // 评论列表样式
    .comment-item {
      padding: 10px;
      margin-left: 10px;
    }
    .comment-input {
      margin: 15px 0;
    }
    .comment-button {
      width: 80px;
      height: 40px;
      font-size: 18px;
    }
  }
}
</style>;
